<!-- 分类下拉组件 -->
<div class="categories-dropdown relative" id="categoriesDropdown">
  <!-- 触发按钮 -->
  <button 
    class="flex items-center space-x-2 px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
    id="categoryButton"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
    <span>商品分类</span>
    <svg 
      class="w-5 h-5 transition-transform duration-200" 
      id="dropdownArrow"
      fill="none" 
      stroke="currentColor" 
      viewBox="0 0 24 24"
    >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>

  <!-- 下拉面板 -->
  <div 
    id="dropdownPanel"
    class="absolute z-50 left-0 w-[600px] mt-2 bg-white rounded-xl shadow-xl border border-gray-100 hidden transform origin-top transition duration-200"
  >
    <div class="grid grid-cols-3 gap-3 p-4">
      <% categories.forEach(function(category) { %>
        <!-- 分类卡片 -->
        <div class="category-card bg-gray-50/50 rounded-lg p-2 hover:bg-gray-100/70 transition duration-200">
          <!-- 一级分类标题 -->
          <a href="<%= category.url %>" class="block mb-2">
            <div class="flex items-center justify-between px-2">
              <h3 class="text-sm font-medium text-gray-900 hover:text-red-600 transition duration-200">
                <%= category.name %>
              </h3>
              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7"/>
              </svg>
            </div>
          </a>

          <!-- 二级分类列表 -->
          <% if (category.children && category.children.length > 0) { %>
            <div class="grid grid-cols-2 gap-1 px-1">
              <% category.children.forEach(function(subCategory) { %>
                <a 
                  href="<%= subCategory.url %>"
                  class="inline-flex items-center px-2 py-1 text-xs text-gray-600 hover:text-red-600 hover:bg-red-50 rounded transition duration-200 truncate"
                  title="<%= subCategory.name %>"
                >
                  <%= subCategory.name %>
                </a>
              <% }); %>
            </div>
          <% } %>
        </div>
      <% }); %>
    </div>

    <!-- 底部推荐 -->
    <div class="bg-gradient-to-r from-red-50 to-orange-50 rounded-b-xl p-3 border-t border-gray-100">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
          <span class="text-xs font-medium text-gray-700">热门推荐</span>
        </div>
        <a href="/promotions" class="text-xs text-red-600 hover:text-red-700">查看更多 →</a>
      </div>
      <div class="mt-2 flex flex-wrap gap-3">
        <a href="/hot/new" class="text-xs text-gray-600 hover:text-red-600">新品上市</a>
        <a href="/hot/sale" class="text-xs text-gray-600 hover:text-red-600">特惠活动</a>
        <a href="/hot/brand" class="text-xs text-gray-600 hover:text-red-600">品牌精选</a>
        <a href="/hot/clearance" class="text-xs text-gray-600 hover:text-red-600">清仓特价</a>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const dropdownButton = document.getElementById('categoryButton');
  const dropdownPanel = document.getElementById('dropdownPanel');
  const dropdownArrow = document.getElementById('dropdownArrow');
  let isOpen = false;

  // 切换下拉菜单
  function toggleDropdown() {
    isOpen = !isOpen;
    dropdownPanel.classList.toggle('hidden');
    dropdownArrow.classList.toggle('transform');
    dropdownArrow.classList.toggle('rotate-180');
    dropdownButton.classList.toggle('ring-2');
    dropdownButton.classList.toggle('ring-red-500');
    
    // 添加动画效果
    if (isOpen) {
      dropdownPanel.classList.add('opacity-100', 'scale-100');
      dropdownPanel.classList.remove('opacity-0', 'scale-95');
    } else {
      dropdownPanel.classList.add('opacity-0', 'scale-95');
      dropdownPanel.classList.remove('opacity-100', 'scale-100');
    }
  }

  // 点击按钮切换下拉菜单
  dropdownButton.addEventListener('click', function(e) {
    e.stopPropagation();
    toggleDropdown();
  });

  // 点击外部关闭下拉菜单
  document.addEventListener('click', function(e) {
    const dropdown = document.getElementById('categoriesDropdown');
    if (!dropdown.contains(e.target) && isOpen) {
      toggleDropdown();
    }
  });

  // 添加卡片hover效果
  const categoryCards = document.querySelectorAll('.category-card');
  categoryCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.classList.add('shadow-sm');
    });
    card.addEventListener('mouseleave', function() {
      this.classList.remove('shadow-sm');
    });
  });
});
</script>

<style>
.categories-dropdown {
  /* 添加过渡动画 */
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  
  #dropdownPanel {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s var(--transition-timing);
  }
  
  #dropdownPanel.opacity-100 {
    opacity: 1;
    transform: scale(1);
  }
}

/* 自定义滚动条样式 */
.category-card::-webkit-scrollbar {
  width: 4px;
}

.category-card::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.category-card::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.category-card::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style> 